// CORE
@import "../../../global/less/core/variable.less";
@import "../../../global/less/core/mixins.less";
@import "../../../global/less/core/functions.less";

/* ========================================================================
 * FRONTEND THEMES PAGE
 * ======================================================================== */
.list-frontend-theme{
  text-decoration: none !important;
  .image-bg{
    background-image: url('../../img/frontend-themes/bg-macbook.png');
    background-size: 470px;
    width: 470px;
    height: 280px;
    display:inline-block;
    position: relative;
    &.coming-soon{
      background-image: url('../../img/frontend-themes/bg-macbook-empty.png');
      background-size: 470px;
    }
    .image-scroll{
      background-position: center 0;
      background-repeat: no-repeat;
      position:absolute;
      width: 339px;
      height: 217px;
      top: 24px;
      left: 68px;
      .border-radius(4px);
    }
    .image-scroll{
      &.available{
        .transition(all 10s ease-out 0s);
      }
      &.start-page{
        background-image: url('../../img/frontend-themes/start-page.jpg');
      }
      //      &.landing-page{
      //        background-image: url('../../img/frontend-themes/start-page.jpg');
      //      }
      //      &.corporate{
      //        background-image: url('../../img/frontend-themes/start-page.jpg');
      //      }
      //      &.portfolio{
      //        background-image: url('../../img/frontend-themes/start-page.jpg');
      //      }
      //      &.personal-cv{
      //        background-image: url('../../img/frontend-themes/start-page.jpg');
      //      }
      //      &.agency{
      //        background-image: url('../../img/frontend-themes/start-page.jpg');
      //      }
      //      &.blog{
      //        background-image: url('../../img/frontend-themes/start-page.jpg');
      //      }
      //      &.shop{
      //        background-image: url('../../img/frontend-themes/start-page.jpg');
      //      }
      .image-ribbon{
        background:url("../../img/frontend-themes/ribbon.png") no-repeat scroll right top rgba(0, 0, 0, 0);
        display:inline-block;
        width:100%;
        height:100%;
        margin:0px -40px 0 0;
        border-radius: 0px 3px 0px 0px;
      }
    }
    &:hover{
      .image-scroll{
        &.available{
          background-position: center 100%!important;
        }
      }
    }
  }
  .image-title{
    text-transform: capitalize;
    text-align: center;
    margin: 0px 0px 40px 0px;
    font-weight: 300;
  }
}

// DESKTOP
@media (max-width: 1024px) and (min-width: 801px) {
  .list-frontend-theme{
    .image-bg{
      margin-left: 175px !important;
    }
  }
}
@media (max-width: 800px) {
  .list-frontend-theme{
    .image-bg{
      margin-left: 90px !important;
    }
  }
}
@media (max-width: 360px) {
  .list-frontend-theme{
    .image-bg{
      background-size: 335px auto !important;
      width: 320px;
      height: 205px;
      margin-left: 0px !important;
    }
    .image-scroll{
      width: 235px !important;
      height: 150px !important;
      top: 20px !important;
      left: 50px !important;
      &.start-page{
        background-size: 300px;
      }
    }
  }
}
